<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
<h3>v-if判断</h3>
<div v-if="onOff">看得见我</div>
<div v-if="!onOff">看不见我</div>
<br>
<h3>v-if控制模板输入</h3>
<p v-if="ok">我只是一个标题!</p>
<template v-if="onOff">
	<p>这里是 template 的标题</p>
	<p>这里是template的描述</p>
</template>
<h3>v-else判断</h3>
<p v-if="onOff">标题1</p>
<p v-else>标题2</p>
<h3>v-else-if判断</h3>
<p v-if="'abc' == 'cba'">标题一</p>
<p v-else-if="'abc' == 'abc'">标题二</p>
<p v-else>6666</p>
<hr>
<div>
提示：<br>
1：v-if 根据 onOff(true,false)决定是否插入 div 元素，这里的插入不是 show/hide 显示隐藏，而是remove；<br>
2：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
</div>
</div>
<script type="text/javascript">
var myApp = new Vue({
	el:"#myApp",
	data:{
		onOff:true, 
		ok:false,
	}
});
</script>
</body>
</html>